<template>
  <div class="home-block section-3">
    <div class="adv-box">
      <img oncontextmenu="return false" :src="item.photo" class="fit-img" :class="{'active': current === index}" v-for="(item, index) in list" :key="index" alt="">
    </div>
    <div class="adv-list">
      <div class="adv-item" :class="{'active': current === index}" v-for="(item, index) in list" :key="index" @click="current = index">
        <div class="adv-item-inner" :class="{'active': isStart}">
          <div class="adv-title">{{ item.title }}</div>
          <div class="adv-item-info">
            <div class="adv-desc">{{ item.titles }}</div>
            <a :href="item.url || 'javascript:;'" class="adv-btn flex-center hv-opacity">
              <span class="label">{{ item.search_title }}</span>
              <i class="iconfont icon-arrow"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { getAdvList } from '@/api/home'
import { formatText } from '../../utils/utils'
const list = ref([])
const current = ref(0)
const isStart = ref(false)

const prop = defineProps({
  cur: {
    type: Number,
  }
});

onMounted(() => {
  loadData() 
})

watch(() => prop.cur, (newValue, oldValue) => {
  if (newValue === 2) {
    isStart.value = true
  } else {
    isStart.value = false
  }
}, { immdiate: true })

const loadData = () => {
  getAdvList().then(res => {
    list.value = res.data.map(el => {
      el.titles = formatText(el.titles)
      return el
    })
  })
};

</script>

<style lang="scss">
.adv-box {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 2;
  img {
    position: absolute;
    opacity: 0;
    z-index: 2;
    transition: all .3s ease-in-out;
    visibility: hidden;
    &.active {
      visibility: visible;
      opacity: 1;
    }
  }
}
.adv-list {
  position: absolute;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  
}
.adv-item {
  flex: 1;
  height: 100vh;
  cursor: pointer;
  transition: all .3s ease-in-out;
  &+.adv-item {
    border-left: 1px solid rgba(242,242,242,.9); 
  }
  &.active {
    flex: 2;
    .adv-item-inner {
      width: 100%;
      padding: 0 5rem /* 80/16 */ 5rem /* 80/16 */;
      
      .adv-title { 
        font-size: 1.875rem /* 30/16 */;
        font-weight: bold;
        color: #FFFFFF;
      }
      .adv-item-info {
        height: auto;
        margin-top: 1.375rem /* 22/16 */;
        visibility: visible;
      }
    }
  }
  .adv-item-inner {
    width: 100%;
    height: 100%;
    padding: 0 2.5rem /* 40/16 */ 5rem /* 80/16 */;
    transition: all .3s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    // transition: all .6s ease-in-out;
    .adv-title {
      font-size: 1.5625rem /* 25/16 */;
      line-height: 1;
      color: #FFFFFF;
      transition: all .3s ease-in-out;
    }
    .adv-item-info {
      height: 0;
      margin-top: 0;
      transition: all .3s ease-in-out;
      overflow: hidden;
      visibility: hidden;
    }
    .adv-desc {
      font-size: 1rem /* 16/16 */;
      line-height: 2.125rem /* 34/16 */;
      color: rgba(255,255,255,.9);
    }
    .adv-btn {
      margin-top: 2.8125rem /* 45/16 */;
      width: 8.75rem /* 140/16 */;
      height: 3rem /* 48/16 */;
      background: #E50012;
      border-radius: 2px;
      .label {
        font-size: .875rem /* 14/16 */;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 1;
      }
      .iconfont {
        font-size: .875rem /* 14/16 */;
        line-height: 1;
        color: #FFFFFF;
        margin-left: .125rem /* 2/16 */;
      }
    }
  }
}
</style>